<template>
  <div class="usercard">
    <!-- <div class="addbtn">
      <a href="javascript:;" @click="centerDialogVisible = true">添加用户名片属性</a>
    </div> -->
    <div class="ucard-list">
      <el-row>
        <el-col :span="4" class="aaa">属性名称</el-col>
        <el-col :span="4" class="aaa">开启状态</el-col>
        <el-col :span="4" class="aaa">属性名称</el-col>
        <el-col :span="4" class="aaa">开启状态</el-col>
        <el-col :span="4" class="aaa">属性名称</el-col>
        <el-col :span="4" class="aaa">开启状态</el-col>
        <template v-for="(item, index) in testData">
          <el-col :span="4" class="aaa bbb" :key="index">
            {{item.name}}
          </el-col>
          <el-col :span="4" class="aaa" :key="'a'+index">
            <el-switch v-model="item.state" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" />
          </el-col>
        </template>
      </el-row>
    </div>
    <div class="save-btn">
      <el-button type="primary" @click="changeCard">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getuserCardList, getUserCardUpdate } from "@/api/usermanage";
export default {
  reject: ['reload'],
  data() {
    return {
      centerDialogVisible: false,
      name: "添加用户名片属性",
      testData: [
        {
          name: '用户ID',
          state: '0',
          userProperty: "userCode"
        },
        {
          name: '用户账号',
          state: '1',
          userProperty: "userCount"
        },
        {
          name: '性别',
          state: '1',
          userProperty: "sex"
        },
        {
          name: '城市',
          state: '1',
          userProperty: "areaName"
        },
        {
          name: '职业',
          state: '1',
          userProperty: "jobName"
        },
        {
          name: '生日',
          state: '1',
          userProperty: "birthday"
        },
        {
          name: '电话号码',
          state: '1',
          userProperty: "tel"
        },
        {
          name: '手机号码',
          state: '1',
          userProperty: "phone"
        },
        {
          name: '公司名称',
          state: '1',
          userProperty: "company"
        },
        {
          name: '所属行业',
          state: '1',
          userProperty: "tradeName"
        }
      ],
      addData: []
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getuserCardList({
        userCode: this.$route.query.code
      }).then(res => {
        this.addData = res.data
        this.addData.forEach((key,index) => {
          this.testData.forEach((item, index) => {
            if(item.userProperty === key.userProperty) {
              this.$set(item, 'state', key.state)       
            }
          })
        })
      })
    },
    changeCard() {
      let data = this.testData.map((v, i) => {
        delete v.name
        v.userCode = this.$route.query.code
        return v
      })
      getUserCardUpdate(data).then(res => {
        if(res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        } else if(res.code === 500) {
          this.$message({
            showClose: true,
            message: '保存失败',
            type: 'error'
          })
          this.reload()
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.usercard {
  .addbtn {
    margin: 25px 0 23px 0;
    a {
      display: block;
      width: 158px;
      height: 40px;
      background: rgba(72, 141, 255, 1);
      border-radius: 2px;
      color: #fff;
      text-align: center;
      line-height: 40px;
    }
  }
  .ucard-list {
    margin-bottom: 200px;
    .propname {
      p {
        color: #333;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
      }
    }
    .action {
      width: 32px;
      height: 75px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #488dff;
    }
    .aaa {
      padding: 20px;
      border: 1px #EBEEF5 solid;
      text-align: center;
    }
    .bbb {
      line-height: 20px;
    }
  }
  .save-btn {
    width: 100px;
    height: 40px;
    margin: 0 auto;
    a {
      display: block;
      width: 100px;
      height: 40px;
      line-height: 40px;
      background: rgba(72, 141, 255, 1);
      border-radius: 2px;
      text-align: center;
      color: #fff;
    }
  }
  .card-dialog {
    // width: 842px;
    // background: #ccc;
    .header-title {
      height: 56px;
      overflow: hidden;
      // background: #ccc;
      .lef {
        float: left;
        line-height: 37px;
        font-size: 16px;
        font-weight: 900;
        color: #333;
        i {
          float: left;
          margin-top: 8.5px;
          width: 11px;
          height: 20px;
          background: rgba(72, 141, 255, 1);
          border-radius: 4px;
          margin-right: 12px;
        }
      }
    }
    .dialog-bd {
      margin-left: 100px;
      margin-top: 60px;
      margin-bottom: 30px;
      .demo-ruleForm {
        label {
          width: 146px;
          text-align: right;
        }
        i {
          color: red;
        }
        input {
          width: 444px;
          height: 36px;
          border-radius: 3px;
          color: #999;
          border: 1px solid rgba(153, 153, 153, 1);
        }
      }
    }
  }
}
</style>

